<template>
	<view class="container">
		
		<z-paging ref="paging" v-model="goodsList" @query="getGoodsList">
			<template #top>
				<view style="background-color: var(--tn-color-primary);">
					<tn-navbar home-icon="" bg-color="tn-type-primary_bg" text-color="tn-white" > 定价管理 </tn-navbar>
				</view>
				<!-- 货主选择 -->
				<view class="owner-section tn-p-sm ">
					<picker @change="handleOwnerChange" :value="selectedIndex" :range="orgList" range-key="orgname">
						<view class="owner-picker tn-p-sm">
							<text class="owner-name">{{ selectedIndex !== -1 ? orgList[selectedIndex]?.orgname : '请选择下级' }}</text>
							<text class="tn-icon-down"></text>
						</view>
					</picker>
				</view>
				
				<!-- 搜索框 -->
				<view class="search-section tn-pl-sm tn-pr-sm tn-pb-sm tn-mb-sm" v-if="selectedIndex > -1">
					<tn-search-box
						v-model="searchKeyword"
						placeholder="搜索商品名称或编码"
						:show-action="false"
						:clearable="true"
						@search="handleSearch"
						@clear="handleClear"
						size="sm"
					></tn-search-box>
				</view>
			</template>
			
			<!-- 商品列表 -->
			<view class="product-section" v-if="selectedIndex > -1">
				<view class="product-card" v-for="(item, index) in goodsList" :key="index">
					<view class="product-info">
						<view class="product-name">{{item.goodsname}}</view>
						<view class="product-code">{{item.goodscode}}</view>
						<view class="product-code">{{item.goodsspec}}</view>
						<view class="product-code">{{item.manufacturer}}</view>
						<view class="product-price" >
							<text class="price-label">结算价：</text>
							<text class="price-value">¥{{item.newinnerprice}}</text>
						</view>
					</view>
					<view class="product-action">
						<button class="tn-btn tn-btn--primary tn-btn--sm" @click="showPricePopup(item)">
							设置结算价
						</button>
					</view>
				</view>
			</view>
		</z-paging>

		<!-- 设置结算价弹窗 -->
		<tn-popup v-model="showPopup" mode="center" :mask-close-able="false" :z-index="999">
			<view class="price-popup">
				<view class="popup-header">
					<text class="popup-title">设置结算价</text>
					<text class="close-icon tn-icon-close" @click="closePopup"></text>
				</view>
				<view class="popup-content">
					<view class="info-item">
						<text class="info-label">商品名称</text>
						<text class="info-value">{{currentProduct.goodsname}}</text>
					</view>
					<view class="info-item">
						<text class="info-label">商品编码</text>
						<text class="info-value">{{currentProduct.goodscode}}</text>
					</view>
					
					<view class="info-item">
						<text class="info-label">商品规格</text>
						<text class="info-value">{{currentProduct.goodsspec}}</text>
					</view>
					
					<view class="info-item">
						<text class="info-label">生产厂家</text>
						<text class="info-value">{{currentProduct.manufacturer}}</text>
					</view>
					
					<view class="info-item">
						<text class="info-label">原结算价</text>
						<text class="info-value">¥{{currentProduct.innerprice}}</text>
					</view>
					<view class="info-item">
						<text class="info-label tn-color-red">新结算价</text>
						<input type="digit" v-model="currentProduct.newinnerprice" placeholder="请输入结算价" class="price-input"/>
					</view>
				</view>
				<view class="popup-footer">
					<button class="cancel-btn" @click="closePopup">取消</button>
					<button class="confirm-btn" @click="savePrice">确定</button>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script setup>
import { ref, computed, reactive,onMounted } from 'vue'
import { postCall  } from '@/api/index.js'
import { createParams } from '@/utils/utils.js'
import Big from 'big.js'
import { toastMessage } from '@/utils/toast.js'
const procName = "PROC_APP_DO_ORG";



const beforeBack = () => {
	  return new Promise((resolve) => {
	    setTimeout(() => {
	      uni.redirectTo({
	      	url: '/pages/index/index'
	      });
		  return true;
	    }, 500)
	  })
	}

onMounted(()=>{
	getNextOrgList();
})
	
// 货主列表
const orgList = ref([])
const selectedIndex = ref(-1)


const getNextOrgList = async () =>{
	let params = {};
	params["P_PROC_NAME"] = procName;
	params["P_ACTION"] = "GETNEXTORG";
	await postCall(params).then(res=>{
		if(res){
			if(res.code===200){
				orgList.value = res.data.DATASET;
				console.log(orgList.value);
			}
		}
	})
}

// 搜索相关
const searchKeyword = ref('')
const originalProductList = ref([])

// 弹窗相关
const showPopup = ref(false)
const currentProduct = ref({})
const settlementPrice = ref('')

// 处理货主选择
const handleOwnerChange = (e) => {

	selectedIndex.value = e.detail.value;
	getGoodsList();
	// orgid.value = orgList.value[selectedIndex.value].orgid;
	// 模拟加载该货主的商品列表
	// loadProducts(orgList.value[ownerIndex.value].id)
}
const paging = ref(null)
const goodsList = ref([]);

// 加载商品列表
const getGoodsList = async (pageNo, pageSize) => {
	console.log("==:",pageNo,pageSize)
	let params = {};
	params["P_PROC_NAME"] = procName;
	params["P_ACTION"] = "GETCURRENTGOODS";
	params["P_NEXTORGID"] = orgList.value[selectedIndex.value]?.orgid ?? '';
	params["P_PAGE"] = pageNo ?? 1;
	params["P_PAGESIZE"] = pageSize ?? 10;
	params["P_CON"] = searchKeyword.value;
	await postCall(params).then(res=>{
		if(res){
			paging.value.complete(res.data.DATASET);
		}
	}).catch(res =>{
		paging.value.complete(false);
	})
}

// 处理搜索
const handleSearch = () => {
	// 搜索逻辑已通过计算属性实现
	paging.value.reload();
}

// 处理清除搜索
const handleClear = () => {
	searchKeyword.value = '';
	paging.value.reload();
}

// 显示设置价格弹窗
const showPricePopup = (item) => {
	currentProduct.value = { ...item }
	showPopup.value = true
}

// 关闭弹窗
const closePopup = () => {
	showPopup.value = false
	// 延迟清空数据，避免闪烁
	setTimeout(() => {
		currentProduct.value = {}
	}, 200)
}

// 保存结算价
const savePrice = async () => {
	
	let params = {};
	params["P_PROC_NAME"] = procName;
	params["P_ACTION"] = "SAVEINNERPRICE";
	params["P_NEXTORGID"] = orgList.value[selectedIndex.value]?.orgid ?? '';
	params["P_CON"] = searchKeyword.value;
	await postCall(Object.assign(params,createParams(currentProduct.value))).then(res=>{
		if(res){
			if(res.code === 200){
				toastMessage("设置成功！");
				const index = goodsList.value.findIndex(item => item.goodsid === currentProduct.value.goodsid)
				if (index !== -1) {
					goodsList.value[index].newinnerprice = currentProduct.value.newinnerprice;
				}
				closePopup();
			}
		}
	}).catch(res =>{
		
	})
	
	
	
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f6fa;
}

.page-header {
	padding: 40rpx 30rpx;
	background: linear-gradient(to right, #4a90e2, #5cb3ff);
	
	.title {
		font-size: 36rpx;
		color: #fff;
		font-weight: 500;
	}
}

.owner-section {
	background-color: #fff;
	
	.owner-picker {
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.owner-name {
			font-size: 32rpx;
			color: #333;
		}
		
		.tn-icon-down {
			color: #999;
			font-size: 24rpx;
		}
	}
}

.search-section {
	background-color: #fff;
	
	:deep(.tn-search-box) {
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.tn-search-box__input {
			height: 72rpx;
			font-size: 28rpx;
		}
		
		.tn-search-box__icon {
			font-size: 32rpx;
		}
	}
}

.product-section {
	padding: 0 30rpx;
	
	.product-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.product-info {
			flex: 1;
			margin-right: 20rpx;
		}
		
		.product-action {
			flex-shrink: 0;
		}
		
		.product-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 8rpx;
		}
		
		.product-code {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 16rpx;
		}
		
		.product-price {
			font-size: 28rpx;
			margin-bottom: 8rpx;
			
			.price-label {
				color: #666;
			}
			
			.price-value {
				color: #ff6b6b;
				font-weight: bold;
			}
		}
	}
}

.price-popup {
	width: 600rpx;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	
	.popup-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.popup-title {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
		}
		
		.close-icon {
			color: #999;
			font-size: 32rpx;
			padding: 10rpx;
		}
	}
	
	.popup-content {
		padding: 30rpx;
		
		.info-item {
			margin-bottom: 24rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
			
			.info-label {
				font-size: 28rpx;
				color: #666;
				margin-bottom: 12rpx;
				display: block;
			}
			
			.info-value {
				font-size: 32rpx;
				color: #333;
				background-color: #f8f9fa;
				padding: 20rpx;
				border-radius: 8rpx;
				display: block;
			}
			
			.price-input {
				width: 100%;
				height: 88rpx;
				background-color: #f8f9fa;
				border-radius: 8rpx;
				padding: 0 20rpx;
				font-size: 32rpx;
				color: #333;
			}
		}
	}
	
	.popup-footer {
		display: flex;
		border-top: 1rpx solid #f5f5f5;
		
		button {
			flex: 1;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			border: none;
			
			&.cancel-btn {
				background-color: #f8f9fa;
				color: #666;
			}
			
			&.confirm-btn {
				background: linear-gradient(to right, #4a90e2, #5cb3ff);
				color: #fff;
			}
		}
	}
}
</style> 